<template>
	<div class="deposit_page">
		<van-nav-bar :title="$t('deposit.navTitle')" placeholder left-arrow @click-left="onClickLeft" safe-area-inset-top :border="false" />
		<div class="page_cont">
			<div class="sw_but_box">
				<el-popover placement="bottom" width="160" trigger="click" :visible-arrow="false" popper-class="tick"
					v-model="hasCoin">
					<div class="slot" slot="reference">
						{{$t('deposit.depositCurrency')}}
						<el-button>
							<img src="@/assets/images/home/usdt.png" class="coin" />
							<p>USDT</p>
							<i class="el-icon-arrow-down"></i>
						</el-button>
					</div>
					<div class="time_item coin_box" :class="activeCoin == index ? 'active' : ''" v-for="(item,index) in coinList"
						:key="index" @click="handleCoin(index)">
						<img src="@/assets/images/home/usdt.png" class="coin" />
						<span>{{item}}</span>
					</div>
				</el-popover>
				<el-popover placement="bottom" width="160" trigger="click" :visible-arrow="false" popper-class="tick"
					v-model="hasNetwork">
					<div class="slot" slot="reference">
						{{$t('deposit.chooseNetwork')}}
						<el-button>
							<img :src="networkList[activeNetwork]?.logo" class="coin" />
							<p>{{networkList[activeNetwork]?.name}}</p>
							<i class="el-icon-arrow-down"></i>
						</el-button>
					</div>
					<div class="time_item coin_box" :class="activeNetwork == index ? 'active' : ''"
						v-for="(item,index) in networkList" :key="index" @click="handleNetwork(index)">
						<img :src="item.logo" class="coin" />
						<span>{{item.name}}</span>
					</div>
				</el-popover>
			</div>
			<div class="qr_box">
				<div class="qrcode">
					<img :src="qrcodeUrl" id="qrcodeUrl" class="qrcodeUrl" />
				</div>
				<div class="add_box_title">
					{{$t('deposit.chooseNetwork')}}
				</div>
				<div class="address">
					<p>
						{{networkList[activeNetwork]?.address}}
					</p>
					<el-button
						@click="$utils.copy(networkList[activeNetwork]?.address); $message.success($t('success'));">{{$t('deposit.copy')}}</el-button>
				</div>
			</div>
			<div class="tips_box">
				<div class="not">
					<i class="el-icon-warning-outline"></i>
					{{$t('deposit.notice')}}
				</div>
				<div class="info">
					{{$t('deposit.noticeText')}}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Qrcode from 'qrcode'
	import {
		marketNetworks
	} from '@/api/home'
	export default {
		props: {},
		components: {},
		data() {
			return {
				hasCoin: false,
				hasNetwork: false,
				activeNetwork: 0,
				activeCoin: 0,
				qrcodeUrl: '',
				networkList: [],
				coinList: ['USDT']
			}
		},
		computed: {},
		watch: {},
		mounted() {
			this.getNetWork()
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1)
			},
			handleCoin(index) {
				this.activeCoin = index
			},
			handleNetwork(index) {
				this.activeNetwork = index
				this.getImg()
				this.hasNetwork = false
			},
			getImg() {
				Qrcode.toDataURL(
					this.networkList[this.activeNetwork].address, {
						width: 160,
						height: 160,
						margin: 2
					},
					(err, url) => {
						if (err) {
							throw err
						}
						this.qrcodeUrl = url
					}
				)
			},
			async getNetWork() {
				const res = await marketNetworks()
				console.log('res', res);
				if (res && res.code == 1) {
					this.networkList = res.data
					this.getImg()
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.deposit_page {
		::v-deep .van-nav-bar {
			background-color: #1B232E;

			.van-icon {
				color: #fff;
				font-size: 18px;
			}

			.van-nav-bar__title {
				color: #fff;
			}
		}

		.page_cont {
			padding: 25px 15px 5px;
		}

		.sw_but_box {
			display: flex;
			align-items: center;
			margin-bottom: 17px;

			.slot {
				font-size: 14px;
				color: #999CA0;
				text-align: left;
			}

			.el-button {
				min-width: 160px;
				height: 50px;
				padding: 15px;
				font-size: 14px;
				color: #fff;
				background-color: #12171D;
				border: 0;
				border-radius: 10px;
				margin-top: 14px;

				::v-deep span {
					display: flex;
					align-items: center;
					justify-content: center;
				}

			}

			.coin {
				width: 20px;
				margin-right: 10px;
				flex-shrink: 0;
			}

			p {
				flex: 1;
				text-align: left;
			}

			i {
				font-size: 14px;
				color: #fff;
			}
		}

		.qr_box {
			padding: 50px 15px 15px;
			background-color: #12171D;
			margin-bottom: 20px;

			.qrcode {
				margin-bottom: 40px;

				.qrcodeUrl {
					width: 160px;
				}
			}

			.add_box_title {
				font-size: 14px;
				text-align: left;
				margin-bottom: 14px;
				color: #999CA0;
			}

			.address {
				display: flex;
				align-items: center;
				padding: 15px;
				background-color: #161D26;
				border-radius: 10px;

				p {
					max-width: 80%;
					word-wrap: break-word;
					text-align: left;
				}

				.el-button {
					width: 46px;
					height: 26px;
					background-color: #137EFE;
					border-radius: 6px;
					padding: 5px;
					border: 0;
					color: #fff;
					font-size: 12px;
					margin-left: 15px;
				}
			}
		}

		.tips_box {

			.not {
				display: flex;
				align-items: center;
				font-size: 12px;
				color: #fff;
				margin-bottom: 10px;

				i {
					color: orangered;
					margin-right: 5px;
				}
			}

			.info {
				font-size: 12px;
				color: #999CA0;
				text-align: left;
			}
		}
	}
</style>

<style lang="less">
	body .time_item {
		&.coin_box {
			padding-left: 0;
		}

		.coin {
			width: 20px;
			margin-right: 10px;
			flex-shrink: 0;
		}

	}
</style>